<template>
    <div tabindex="0" class="et-input mb-[2px]!">
        <v-menu transition="scale-transition" class="inputSelect">
            <template v-slot:activator="{ props }">
                <Input active variant="solo" :label="label" :placeholder="placeholder" required readonly v-bind="props">
                <template v-slot:append-inner>
                    <i class="mdi-menu-down mdi v-icon notranslate v-theme--light v-icon--size-default v-select__menu-icon"
                        aria-hidden="true"></i>
                </template>
                </Input>
            </template>

            <v-list>
                <v-list-item class="border-b-1! border-[#ccc] border-solid mx-2">
                    <div class="flex justify-space-between">
                        <div>Quantity </div>
                        <div>Price per piece</div>
                        <div>
                            <i class="mdi-menu-down mdi v-icon notranslate v-theme--light v-icon--size-default v-select__menu-icon"
                                aria-hidden="true"></i>
                        </div>
                    </div>
                </v-list-item>
                <v-list-item v-for="(item, i) in items" :key="i" :value="i"
                    class="border-b-1! border-[#ccc] border-solid mx-2">
                    <div class="flex justify-space-between">
                        <div>{{ item.price }}</div>
                        <div>{{ item.PricePerPiece }}</div>
                        <div></div>
                    </div>
                </v-list-item>
                <v-list-item>
                    <div class="flex justify-space-between items-center mt-2">
                        <div @click.stop="">
                            <div class="text-[16px] mb-1 font-bold">Custom</div>
                            <input type="text"
                                class="flex-1 pl-2 border-1! border-[#ccc] border-solid h-[45px] w-[80%] focus:border-blue-500! transition-colors duration-300">
                        </div>
                        <div class="flex-1 text-left pl-[40px]">
                            <span class="relative top-3">$1.07</span>
                        </div>
                        <div>

                        </div>
                    </div>
                </v-list-item>
            </v-list>
        </v-menu>
    </div>
</template>


<script setup lang="ts">
import { EmailInput } from '../EmailInput';
import Input from './input.vue';
import type { InputProps } from './interface';
const items = [
    { price: 100, PricePerPiece: '$1.07' },
    { price: 100, PricePerPiece: '$1.07' },
    { price: 100, PricePerPiece: '$1.07' },
    { price: 100, PricePerPiece: '$1.07' },
]
defineProps<InputProps>()
</script>
<style lang="scss" scoped>
@use "./style.scss" as *;
</style>


<style scoped>
.inputSelect .v-overlay__content {
    transform: translateY(-20px) !important;
}
</style>